<!--
 * @Description: 组件
 * @Author: zzj
 * @Date: 2021-10-11 10:06:20
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-11 16:56:52
-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>组件</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
</head>
<body>
	<div id="app">
		<!-- <briup-list></briup-list> -->
		<article-page></article-page>
	</div>

	<script>
		//1.定义组件
		let briupList = {
			template:`
				<div>
					<ul>
						<li v-for="(item,index) in data" :key="index+Math.random()">
							<slot v-bind:row="item"></slot>	
						</li>
					</ul>
				</div>
			`,
			props:["data"],
			data(){
				return{
					name:"列表",
				}
			}
		}

		//文章页面  
		let articlePage = {
			template:`
				<div>
					<h1>文章首页</h1>
					<briup-list :data="articles">
						<div slot-scope="scope">
							<span>{{scope.row.id}}</span>
							<span>{{scope.row.title}}</span>
							<span>{{scope.row.content}}</span>
						</div>
					</briup-list>
					
					<briup-list :data="categories">
						<div slot-scope="scope">
						<span>{{scope.row.id}}</span>
						<span>{{scope.row.name}}</span>
						</div>
					</briup-list>
				</div>
			`,
			data(){
				return{
					articles:[
						{ id: 1, title: "xxx", content: "xxxxxx"},
						{ id: 2, title: "ccc", content: "cccccc"},
						{ id: 3, title: "vvv", content: "vvvvv" }
					],
					categories: [
						{ id: 1, name: "xxx==", content: "xxxxxxx===" },
						{ id: 2, name: "yyy==", content: "yyyyyyy===" },
						{ id: 3, name: "zzz==", content: "zzzzzzz===" },
					]
				}
			},
			//局部注册
			components:{
				 "briup-list":briupList,
				}
		}
		//2.注册组件   全局注册   一定在初始化之前进行注册
		//Vue.component("briup-list", briupList)
		Vue.component("article-page", articlePage)
		//3.使用组件


		new Vue({
			el:"#app",
		})
	</script>
</body>
</html>